<template>
  <div class="register-container">
    <div class="container">
      <div class="register-content">
        <div class="register-left">
          <div class="brand-section">
            <h1 class="brand-name">在线教育平台</h1>
            <p class="brand-slogan">开始您的学习之旅</p>
            <div class="features">
              <div class="feature-item">
                <el-icon class="feature-icon">
                  <VideoPlay/>
                </el-icon>
                <span>优质课程</span>
              </div>
              <div class="feature-item">
                <el-icon class="feature-icon">
                  <User/>
                </el-icon>
                <span>专业教师</span>
              </div>
              <div class="feature-item">
                <el-icon class="feature-icon">
                  <Star/>
                </el-icon>
                <span>学习进度</span>
              </div>
            </div>
          </div>
        </div>
        <div class="register-right">
          <div class="register-wrapper">
            <h2 class="register-title">用户注册</h2>
            <p class="register-subtitle">创建账号，开启学习之旅</p>
            <el-form ref="registerFormRef" :model="registerForm" :rules="rules" label-width="0" class="register-form">
              <el-form-item prop="username">
                <el-input v-model="registerForm.username" placeholder="请输入用户名" prefix-icon="User"/>
              </el-form-item>
              <el-form-item prop="email">
                <el-input v-model="registerForm.email" placeholder="请输入邮箱" prefix-icon="Message"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
                          show-password/>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input v-model="registerForm.phone" placeholder="请确认手机号" prefix-icon="Lock"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleRegister" :loading="loading" class="register-btn">注册
                </el-button>
              </el-form-item>
              <div class="register-footer">
                <span>已有账号？</span>
                <router-link to="/login" class="login-link">立即登录</router-link>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {VideoPlay, User, Star, Message} from '@element-plus/icons-vue'
import {usersRegister} from '../../api/Users.js'

const router = useRouter()
const registerFormRef = ref()
const loading = ref(false)
const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  phone: ''
})

// 验证用户名唯一性（模拟）
const validateUsername = async (rule, value, callback) => {
  // 这里应该调用API检查用户名是否已存在
  // 暂时模拟延迟
  setTimeout(() => {
    // 假设用户名 'admin' 已存在
    if (value === 'admin') {
      callback(new Error('用户名已存在'))
    } else {
      callback()
    }
  }, 500)
}

// 验证手机号
const validatePhone = (rule, value, callback) => {
  console.log(value)
  //定义手机号正则
  const reg = /^1[3-9]\d{9}$/;
  if (!reg.test(value)) {
    console.log(reg.test(value))
    callback(new Error('手机号不符合规范'))
  } else {
    callback()
  }
}
//表单校验的规则
const rules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur'},
    {validator: validateUsername, trigger: 'blur'}
  ],
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, message: '密码长度至少为 6 个字符', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {validator: validatePhone, trigger: 'blur'}
  ]
}
//注册
const handleRegister = () => {
  try {
    //表单校验
    registerFormRef.value.validate()
    loading.value = true
    // 这里应该调用注册API
    usersRegister(registerForm).then(res => {
      {
        if (res.code === 200) {
          //注册成功
          ElMessage.success('注册成功，请登录')
          // 使用name属性进行路由跳转，更可靠
          router.push({name: 'Login'})
        }
      }
    })

  } catch (error) {
    console.error('注册验证失败:', error)
    ElMessage.error('请检查表单信息是否正确')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  display: flex;
  align-items: center;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.register-content {
  display: flex;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.register-left {
  flex: 1;
  padding: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-name {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 16px;
}

.brand-slogan {
  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.feature-icon {
  font-size: 24px;
  background: rgba(255, 255, 255, 0.2);
  padding: 12px;
  border-radius: 50%;
}

.register-right {
  flex: 1;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-wrapper {
  width: 100%;
  max-width: 400px;
}

.register-title {
  color: #303133;
  margin-bottom: 8px;
  font-size: 28px;
}

.register-subtitle {
  color: #606266;
  margin-bottom: 30px;
  font-size: 16px;
}

.register-form .el-form-item {
  margin-bottom: 20px;
}

.register-form .el-input__wrapper {
  border-radius: 8px;
}

.register-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.register-footer {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  font-size: 14px;
  color: #606266;
}

.login-link {
  color: #667eea;
  margin-left: 5px;
  text-decoration: none;
}

.login-link:hover {
  color: #5a6fd8;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-content {
    flex-direction: column;
  }

  .register-left {
    padding: 40px;
    text-align: center;
  }

  .register-right {
    padding: 40px 20px;
  }

  .features {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .feature-item {
    flex-direction: column;
    text-align: center;
  }
}
</style>